<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const imageSrc = 'https://www.themealdb.com/images/ingredients/Lime.png'
        // 浏览器的异步，多进程架构，API化
        function loadImage(src,callback){
            const image = document.createElement('img')
            image.src = src
            image.onload=()=>callback(null,image)
            image.onerror=()=>callback(new Error('加载失败'))
            document.body.append(image)
        }
        // loadImage(imageSrc,function(error,content){
        //     if(error){
        //         console.log(error)
        //         return 
        //     }
        //     console.log(content)
        // })
        // const loadImagePromise = function(src){
        //     return new Promise(function(resolve,reject){
        //         loadImage(src,function(err,image){
        //             if(err){
        //                 reject(err)
        //                 return ;
        //             }
        //             resolve(image)
        //         })
        //     })
        // }
        // loadImagePromise(imageSrc).then(res=>{
        //     console.log(res)
        // })
        // .catch(err=>{
        //     console.log(err)
        // })

        // 不够抽象  ， promisify 上场  通用功能

        function promisify(original){
            function fn(...args){
                return new Promise((resolve,reject)=>{
                    args.push((err,...values)=>{
                        if(err){
                            return reject(err)
                        }
                        resolve(values)
                    })
                    original.apply(this,args)
                })
            }
            return fn
        }
        const loadImagePromise=promisify(loadImage)
        loadImagePromise(imageSrc).then(res=>{
            console.log(res)
        })
    </script>
</body>
</html>